<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <div class="a b c">
        <div itany="网博">测试数据1</div>
        <div class="d">
            <p>测试数据2</p>
            测试数据3
        </div>
    </div> -->

    <script>
        // 1、递归代码一定是一个方法
        // 2、递归是一个方法自调用函数
        // 3、递归一定存在结束节点，同时上一次方法的结果一定是下一次方法的参数
        // function show(n=1){
        //     n++;
        //     if(n<10){
        //         show(n)
        //     }
        // }
        // show(1)

        let vnode = {
            tag:"div",
            attrs:{
                class:"a b c"
            },
            childern:[
                { 
                    tag:"div",
                    attrs:{
                        itany:"网博"
                    },
                    childern:[
                        "测试数据1"
                    ]
                },
                {
                    tag:"div",
                    attrs:{
                        class:"d"
                    },
                    childern:[
                        {
                            tag:"p",
                            childern:[
                                "测试数据2"
                            ]
                        },
                        "测试数据3"
                    ]
                }
            ]
        }

        // {
        //     tag:"div",
        //     attrs:{
        //         class:"a b c"
        //     }
        // }

        function createNode(obj){
            let parentDom = document.createElement(obj.tag);
            for (let key in obj.attrs) {
                parentDom.setAttribute(key,obj.attrs[key])
            }

            for (let item of obj.childern) {
                let tempNode = null;
                if(item instanceof Object){
                    tempNode = createNode(item)
                }else{
                    // parentDom.innerHTML = item;
                    tempNode = document.createTextNode(item)
                }
                parentDom.appendChild( tempNode )
            }
            // console.log(parentDom)
            return parentDom;
        }
        let temp = createNode(vnode)
        console.log(temp)
        document.body.appendChild(temp)

    </script>
</body>
</html>